@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
}

.mobile{
    background: #fff;
    header{
        background: #fff;
        position: fixed;
        top: 0;
        padding: p(40) 0;
        width: 100%;
        overflow: hidden;
        .btn{
            width: p(123);
            height: p(57);
            border: p(4) solid #ff9344;
            border-radius: p(14);
            margin-left: p(21);
            float: left;
            p{
                text-align: center;
                font-size: p(40);
                line-height: p(40);
            }
        }
        
        .sel{
            width: p(163);
            height: p(60);
            border: p(3) solid #ff9344;
            float: right;
            margin-right: p(21);
            position: relative;
//         清除select框的默认样式
            select{
                border: none;
             /*将默认的select选择框样式清除*/
               appearance:none;
               -moz-appearance:none;
               -webkit-appearance:none;
               background: transparent;
               width: 100%;
               height: 100%;
               padding-left: p(14);
            }
            /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
                select::-ms-expand { display: none; }
                &::after{
                    position: absolute;
                    top: p(22);
                    right: p(11);
                    content: "";
                    width: 0px;
                    height: 0px;
                    display: block;
                    border-top: p(16) solid #ff9344;
                    border-right: p(16) solid transparent;
                    border-left: p(16) solid transparent;
                }
            
        }
        .fenl{
            margin-top: p(8);
            h4{
                text-align: center;
            }
        }
    }
//  主体内容
    section{
        padding: 0 p(22);
        padding-top: 17%;
        padding-bottom: 20%;
        .search{
            width: p(268);
            height: p(55);
            border: 1px solid #ff9344;
            border-radius: p(22);
            margin: 0 auto;
            margin-top: p(33);
            input[type="text"]{
                width: p(171);
                height: p(45);
                vertical-align: middle;
                border: none;
                margin-left: p(28);
                font-size: p(24);
                margin-top: p(2);
            }
            input[type="image"]{
                width: p(36);
                height: p(34);
                vertical-align: middle;
                margin-left: p(15);
            }
        }
        .shousuo{
            h4{
                text-align: center;
                margin-top: p(30);
            }
        }
        .shousuo1{
            width: p(512);
            margin: 0 auto;
            margin-top: p(14);
            margin-bottom: p(38);
            overflow: hidden;
            .shousuo2{
                width: p(125);
                height: p(64);
                background: #dcdcdc;
                float: left;
                margin-right: p(4);
                margin-bottom: p(4);
                overflow: hidden;
                p{
                    color: #898989;
                    font-size: p(19);
                    text-align: center;
                    line-height: p(64);
                }
            }
            .shousuo2:nth-of-type(4),
            .shousuo2:nth-of-type(8){
                margin-right: 0;
            }
        }
//      热门搜索
        .logo1{
            width: p(56);
            height: p(80);
            overflow: hidden;
            float: left;
            margin: p(3) 0 0 p(21);
            img{
                width: 100%;
            }
        }
        .tuan{
            margin-top: p(31);
            float: left;
            margin-left: p(8);
            p{
                font-size: p(30);
            }
        }
        
        .logo2{
            width: p(25);
            height: p(32);
            float: right;
            margin: p(37) p(21) 0 0;
            img{
                width: 100%;
            }
        }
        .geng{
            overflow: hidden;
            float: right;
            margin-top: p(39);
            margin-right: p(8);
            a{
                color: #000;
                font-size: p(24);
            }
        }
//      热门搜索内容
        .remen{
            margin-top: p(30);
            .remen1{
                float: left;
                width: 39.5%;
                padding-top: 49.71%;
                overflow: hidden;
                position: relative;
                img{
                    position: absolute;
                    top: 0;
                    width: 100%;
                }
            }
            .remen2{
                float: left;
                width: 59.49%;
                padding-top: 49.71%;
                overflow: hidden;
                margin-left: 1.01%;
                position: relative;
                .remen3{
                    width: 100%;
                    padding-top: 34.7%;
                    overflow: hidden;
                    position: absolute;
                    top: 0;
                    img{
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                }
                .remen4{
                    position: absolute;
                    top: 0;
                    margin-top: 37.7%;
                    width: 100%;
                    padding-top: 46.6%;
                    overflow: hidden;
                    .remen5{
                        position: absolute;
                        top: 0;
                        width: 46.4%;
                        padding-top: 46.6%;
                        overflow: hidden;
                        img{
                            position: absolute;
                            top: 0;
                            width: 100%;
                        }
                    }
                    .remen6{
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 50.2%;
                        padding-top: 46.6%;
                        overflow: hidden;
                        img{
                            position: absolute;
                            top: 0;
                            width: 100%;
                        }
                    }
                }
            }
            
        }
//      推荐搜索
        .logo5{
            width: p(56);
            height: p(52);
            overflow: hidden;
            float: left;
            margin: p(25) 0 0 p(21);
            img{
                width: 100%;
            }
        }
//      推荐内容
        .tuijian{
            overflow: hidden;
            margin-top: p(47);
            margin-bottom: p(40);
            .tuijian1{
                width: 33%;
                height: p(200);
                float: left;
                margin-left: 0.5%;
                img{
                    width: 100%;
                }
            }
            .tuijian1:nth-child(1){
                margin-left: 0;
            }
        }
        
       
    }
  //  尾部
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: p(137);
        ul{
            padding: p(16) 0;
            background: #fff;
            li{
                float: left;
                width: 25%;
                text-align: center;
            }
            a{
                display: block;
                font-size: p(26);
                color: #000;
            }
            a:first-child{
                font-size: p(72);
                color: #FF9344;
                
            }
        }
    }
}